<template>
	<view class="comment-box" v-if="commentList">
		<view class="comment" v-for="(item,i) in commentList">
			<image class="touxiang" :src="item.touxiang" mode=""></image>
			<view class="comment-center">
				<view class="name">
					{{item.name}}
				</view>
				<view class="place">
					{{item.place}}
				</view>
				<view class="content">
					{{item.content}}
				</view>
			</view>
			<view class="comment-icon">
				<image src="../../static/praise_fill.png" mode="aspectFit"></image>
				<image src="../../static/brush.png" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "DetailComment",
		data() {
			return {
				commentList: [],
			}
		},
		methods: {
			getData() {
				uniCloud.callFunction({
					name: 'getDetail',
					data: {
						id: this.xwid // 传递动态的新闻ID
					},
					success: (e) => {
						console.log("获取评论成功", e.result);
						this.commentList = e.result.data[0].comment;
						console.log(this.commentList,"这是什么,");
					},
					fail: (error) => {
						console.error("获取新闻内容失败", error);
					}
				})
			}
		}
		,created() {
			this.getData()
			console.log(this.xwid);
		}
		,props:{
			xwid: String
		}
	}
</script>

<style>
	.comment {
		display: flex;
		gap: 30rpx;
		align-items: center;
		margin: 30rpx 0;
	}

	.touxiang {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.place {
		font-size: 26rpx;
		color: #757575;
	}

	.name {
		font-size: 34rpx;
	}

	.comment-center {
		width: 70%;
		line-height: 40rpx;

	}

	.comment-icon {
		display: flex;
		gap: 30rpx;
	}

	.comment-icon image {
		height: 80rpx;
		width: 50rpx;
	}
</style>